<template>
  <div class="role-based-nav-system">
    <!-- 顶部角色导航 -->
    <div class="role-header">
      <div class="role-brand">
        <el-icon><Grid /></el-icon>
        <span>ERP系统</span>
      </div>
      
      <div class="role-selector">
        <el-select
          v-model="currentRole"
          placeholder="选择角色"
          @change="switchRole"
          style="width: 200px"
        >
          <el-option
            v-for="role in availableRoles"
            :key="role.id"
            :label="role.name"
            :value="role.id"
          >
            <div class="role-option">
              <el-icon><component :is="role.icon" /></el-icon>
              <span>{{ role.name }}</span>
              <el-tag v-if="role.badge" size="small" :type="role.badgeType">
                {{ role.badge }}
              </el-tag>
            </div>
          </el-option>
        </el-select>
      </div>

      <div class="role-info">
        <div class="user-info">
          <el-avatar :size="32" :src="currentUser.avatar" />
          <div class="user-details">
            <div class="user-name">{{ currentUser.name }}</div>
            <div class="user-role">{{ currentRoleName }}</div>
          </div>
        </div>
        <el-button text @click="toggleNotifications">
          <el-icon><Bell /></el-icon>
          <el-badge :value="3" class="notification-badge" />
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧功能面板 -->
      <div class="function-panel" :class="{ 'collapsed': isFunctionPanelCollapsed }">
        <div class="panel-header">
          <h3>{{ currentRoleName }}工作台</h3>
          <el-button text @click="toggleFunctionPanel">
            <el-icon><component :is="isFunctionPanelCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="panel-content">
          <!-- 角色权限概览 -->
          <div class="permission-overview">
            <h4>权限概览</h4>
            <div class="permission-stats">
              <div class="stat-item">
                <div class="stat-value">{{ rolePermissions.total }}</div>
                <div class="stat-label">总权限</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ rolePermissions.active }}</div>
                <div class="stat-label">可用功能</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ rolePermissions.restricted }}</div>
                <div class="stat-label">受限功能</div>
              </div>
            </div>
          </div>

          <!-- 功能分类 -->
          <div class="function-categories">
            <div
              v-for="category in functionCategories"
              :key="category.id"
              class="function-category"
            >
              <div class="category-header" @click="toggleCategory(category.id)">
                <el-icon><component :is="category.icon" /></el-icon>
                <span>{{ category.name }}</span>
                <el-icon class="expand-icon">
                  <component :is="category.expanded ? 'ArrowDown' : 'ArrowRight'" />
                </el-icon>
              </div>
              
              <transition name="category-slide">
                <div v-if="category.expanded" class="category-functions">
                  <div
                    v-for="func in category.functions"
                    :key="func.id"
                    class="function-item"
                    :class="{ 
                      'active': activeFunction === func.id,
                      'restricted': func.restricted,
                      'disabled': func.disabled
                    }"
                    @click="selectFunction(func)"
                  >
                    <el-icon><component :is="func.icon" /></el-icon>
                    <span>{{ func.name }}</span>
                    <div class="function-badges">
                      <el-tag v-if="func.badge" size="small" :type="func.badgeType">
                        {{ func.badge }}
                      </el-tag>
                      <el-icon v-if="func.restricted" class="restricted-icon">
                        <Lock />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间工作区域 -->
      <div class="work-area">
        <!-- 工作区头部 -->
        <div class="work-header">
          <div class="work-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="crumb in workBreadcrumbs" :key="crumb.path">
                <el-icon v-if="crumb.icon"><component :is="crumb.icon" /></el-icon>
                {{ crumb.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="work-actions">
            <el-button size="small" @click="refreshWorkArea">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button size="small" @click="exportData">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>

        <!-- 工作区内容 -->
        <div class="work-content">
          <!-- 角色工作台 -->
          <div class="role-dashboard">
            <div class="dashboard-header">
              <h2>{{ currentRoleName }}工作台</h2>
              <p>{{ currentRoleDescription }}</p>
            </div>

            <!-- 快捷操作 -->
            <div class="quick-actions">
              <h3>快捷操作</h3>
              <div class="actions-grid">
                <div
                  v-for="action in quickActions"
                  :key="action.id"
                  class="action-card"
                  :class="{ 'disabled': action.disabled }"
                  @click="executeAction(action)"
                >
                  <div class="action-icon">
                    <el-icon><component :is="action.icon" /></el-icon>
                  </div>
                  <div class="action-content">
                    <h4>{{ action.title }}</h4>
                    <p>{{ action.description }}</p>
                  </div>
                  <div class="action-badge" v-if="action.badge">
                    <el-tag size="small" :type="action.badgeType">{{ action.badge }}</el-tag>
                  </div>
                </div>
              </div>
            </div>

            <!-- 数据概览 -->
            <div class="data-overview">
              <h3>数据概览</h3>
              <div class="overview-grid">
                <div
                  v-for="overview in dataOverviews"
                  :key="overview.id"
                  class="overview-card"
                >
                  <div class="overview-header">
                    <el-icon><component :is="overview.icon" /></el-icon>
                    <span>{{ overview.title }}</span>
                  </div>
                  <div class="overview-content">
                    <div class="overview-value">{{ overview.value }}</div>
                    <div class="overview-trend" :class="overview.trendType">
                      <el-icon><component :is="overview.trendIcon" /></el-icon>
                      <span>{{ overview.trend }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 最近活动 -->
            <div class="recent-activities">
              <h3>最近活动</h3>
              <div class="activity-list">
                <div
                  v-for="activity in recentActivities"
                  :key="activity.id"
                  class="activity-item"
                >
                  <div class="activity-icon">
                    <el-icon><component :is="activity.icon" /></el-icon>
                  </div>
                  <div class="activity-content">
                    <div class="activity-title">{{ activity.title }}</div>
                    <div class="activity-desc">{{ activity.description }}</div>
                    <div class="activity-time">{{ activity.time }}</div>
                  </div>
                  <div class="activity-status">
                    <el-tag size="small" :type="activity.statusType">
                      {{ activity.status }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="info-panel" :class="{ 'collapsed': isInfoPanelCollapsed }">
        <div class="panel-header">
          <h3>角色信息</h3>
          <el-button text @click="toggleInfoPanel">
            <el-icon><component :is="isInfoPanelCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="panel-content">
          <!-- 角色详情 -->
          <div class="role-details">
            <h4>角色详情</h4>
            <div class="detail-item">
              <label>角色名称:</label>
              <span>{{ currentRoleName }}</span>
            </div>
            <div class="detail-item">
              <label>权限级别:</label>
              <el-tag :type="currentRoleInfo.levelType">{{ currentRoleInfo.level }}</el-tag>
            </div>
            <div class="detail-item">
              <label>部门:</label>
              <span>{{ currentRoleInfo.department }}</span>
            </div>
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ currentRoleInfo.createTime }}</span>
            </div>
          </div>

          <!-- 权限列表 -->
          <div class="permissions-list">
            <h4>权限列表</h4>
            <div class="permission-groups">
              <div
                v-for="group in permissionGroups"
                :key="group.id"
                class="permission-group"
              >
                <div class="group-header">
                  <el-icon><component :is="group.icon" /></el-icon>
                  <span>{{ group.name }}</span>
                </div>
                <div class="group-permissions">
                  <div
                    v-for="permission in group.permissions"
                    :key="permission.id"
                    class="permission-item"
                    :class="{ 'granted': permission.granted }"
                  >
                    <el-icon><component :is="permission.granted ? 'Check' : 'Close'" /></el-icon>
                    <span>{{ permission.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 角色切换历史 -->
          <div class="role-history">
            <h4>角色切换历史</h4>
            <div class="history-list">
              <div
                v-for="history in roleHistory"
                :key="history.id"
                class="history-item"
              >
                <div class="history-icon">
                  <el-icon><component :is="history.icon" /></el-icon>
                </div>
                <div class="history-content">
                  <div class="history-title">{{ history.title }}</div>
                  <div class="history-time">{{ history.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 权限提示弹窗 -->
    <el-dialog
      v-model="showPermissionDialog"
      title="权限提示"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="permission-dialog">
        <el-icon class="permission-icon"><Lock /></el-icon>
        <h3>权限不足</h3>
        <p>{{ permissionMessage }}</p>
        <div class="permission-actions">
          <el-button @click="requestPermission">申请权限</el-button>
          <el-button type="primary" @click="contactAdmin">联系管理员</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Grid, Bell, Expand, Fold, ArrowDown, ArrowRight, Lock, Refresh,
  Download, Check, Close, ShoppingCart, ShoppingBag, Warehouse,
  Money, UserFilled, Setting, Document, List, TrendCharts, DataBoard,
  User, Clock, Warning, Plus, Edit, Delete
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const currentRole = ref('sales-manager')
const isFunctionPanelCollapsed = ref(false)
const isInfoPanelCollapsed = ref(false)
const showPermissionDialog = ref(false)
const permissionMessage = ref('')
const activeFunction = ref('')

// 可用角色数据
const availableRoles = ref([
  {
    id: 'admin',
    name: '系统管理员',
    icon: 'Setting',
    badge: '最高权限',
    badgeType: 'danger'
  },
  {
    id: 'sales-manager',
    name: '销售经理',
    icon: 'ShoppingCart',
    badge: '管理权限',
    badgeType: 'warning'
  },
  {
    id: 'sales-person',
    name: '销售员',
    icon: 'User',
    badge: '普通权限',
    badgeType: 'info'
  },
  {
    id: 'purchase-manager',
    name: '采购经理',
    icon: 'ShoppingBag',
    badge: '管理权限',
    badgeType: 'warning'
  },
  {
    id: 'warehouse-manager',
    name: '仓库管理员',
    icon: 'Warehouse',
    badge: '普通权限',
    badgeType: 'info'
  },
  {
    id: 'finance-manager',
    name: '财务经理',
    icon: 'Money',
    badge: '管理权限',
    badgeType: 'warning'
  }
])

// 当前用户信息
const currentUser = ref({
  name: '张三',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 角色信息数据
const roleInfo = ref({
  'admin': {
    name: '系统管理员',
    level: '最高权限',
    levelType: 'danger',
    department: 'IT部门',
    createTime: '2024-01-01',
    description: '拥有系统所有权限，可以管理用户、角色和系统设置'
  },
  'sales-manager': {
    name: '销售经理',
    level: '管理权限',
    levelType: 'warning',
    department: '销售部门',
    createTime: '2024-01-05',
    description: '管理销售团队，查看销售数据，审批销售订单'
  },
  'sales-person': {
    name: '销售员',
    level: '普通权限',
    levelType: 'info',
    department: '销售部门',
    createTime: '2024-01-10',
    description: '处理客户询价，创建销售订单，跟进客户关系'
  }
})

// 功能分类数据
const functionCategories = ref([
  {
    id: 'sales',
    name: '销售管理',
    icon: 'ShoppingCart',
    expanded: true,
    functions: [
      { id: 'order-list', name: '订单列表', icon: 'List', badge: '', badgeType: '', restricted: false, disabled: false },
      { id: 'order-create', name: '新建订单', icon: 'Plus', badge: 'NEW', badgeType: 'success', restricted: false, disabled: false },
      { id: 'order-approval', name: '订单审批', icon: 'Check', badge: '', badgeType: '', restricted: true, disabled: false },
      { id: 'customer-mgmt', name: '客户管理', icon: 'User', badge: '', badgeType: '', restricted: false, disabled: false }
    ]
  },
  {
    id: 'reports',
    name: '报表分析',
    icon: 'DataBoard',
    expanded: false,
    functions: [
      { id: 'sales-report', name: '销售报表', icon: 'TrendCharts', badge: '', badgeType: '', restricted: false, disabled: false },
      { id: 'customer-report', name: '客户报表', icon: 'DataBoard', badge: '', badgeType: '', restricted: true, disabled: false }
    ]
  }
])

// 快捷操作数据
const quickActions = ref([
  {
    id: 'new-order',
    title: '新建订单',
    description: '快速创建销售订单',
    icon: 'Plus',
    badge: 'HOT',
    badgeType: 'danger',
    disabled: false
  },
  {
    id: 'customer-search',
    title: '客户查询',
    description: '搜索客户信息',
    icon: 'User',
    badge: '',
    badgeType: '',
    disabled: false
  },
  {
    id: 'sales-report',
    title: '销售报表',
    description: '查看销售数据报表',
    icon: 'TrendCharts',
    badge: '',
    badgeType: '',
    disabled: false
  },
  {
    id: 'system-settings',
    title: '系统设置',
    description: '管理系统配置',
    icon: 'Setting',
    badge: '',
    badgeType: '',
    disabled: true
  }
])

// 数据概览数据
const dataOverviews = ref([
  {
    id: 'total-orders',
    title: '总订单数',
    value: '1,234',
    icon: 'Document',
    trend: '+12%',
    trendType: 'positive',
    trendIcon: 'TrendCharts'
  },
  {
    id: 'total-sales',
    title: '总销售额',
    value: '¥2,345,678',
    icon: 'Money',
    trend: '+8%',
    trendType: 'positive',
    trendIcon: 'TrendCharts'
  },
  {
    id: 'active-customers',
    title: '活跃客户',
    value: '456',
    icon: 'User',
    trend: '-2%',
    trendType: 'negative',
    trendIcon: 'TrendCharts'
  }
])

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    title: '创建销售订单 #SO-001',
    description: '为客户张三创建了新的销售订单',
    icon: 'Document',
    time: '2分钟前',
    status: '已完成',
    statusType: 'success'
  },
  {
    id: 2,
    title: '更新客户信息',
    description: '更新了客户李四的联系方式',
    icon: 'User',
    time: '15分钟前',
    status: '已完成',
    statusType: 'success'
  },
  {
    id: 3,
    title: '导出销售报表',
    description: '导出了1月份的销售数据报表',
    icon: 'Download',
    time: '1小时前',
    status: '已完成',
    statusType: 'success'
  }
])

// 权限组数据
const permissionGroups = ref([
  {
    id: 'sales',
    name: '销售权限',
    icon: 'ShoppingCart',
    permissions: [
      { id: 'view-orders', name: '查看订单', granted: true },
      { id: 'create-orders', name: '创建订单', granted: true },
      { id: 'approve-orders', name: '审批订单', granted: false },
      { id: 'delete-orders', name: '删除订单', granted: false }
    ]
  },
  {
    id: 'customer',
    name: '客户权限',
    icon: 'User',
    permissions: [
      { id: 'view-customers', name: '查看客户', granted: true },
      { id: 'edit-customers', name: '编辑客户', granted: true },
      { id: 'delete-customers', name: '删除客户', granted: false }
    ]
  },
  {
    id: 'reports',
    name: '报表权限',
    icon: 'DataBoard',
    permissions: [
      { id: 'view-reports', name: '查看报表', granted: true },
      { id: 'export-reports', name: '导出报表', granted: true },
      { id: 'create-reports', name: '创建报表', granted: false }
    ]
  }
])

// 角色切换历史
const roleHistory = ref([
  {
    id: 1,
    title: '切换到销售经理角色',
    icon: 'ShoppingCart',
    time: '2024-01-15 09:00'
  },
  {
    id: 2,
    title: '切换到销售员角色',
    icon: 'User',
    time: '2024-01-14 16:30'
  },
  {
    id: 3,
    title: '切换到系统管理员角色',
    icon: 'Setting',
    time: '2024-01-14 10:15'
  }
])

// 计算属性
const currentRoleName = computed(() => {
  const role = availableRoles.value.find(r => r.id === currentRole.value)
  return role?.name || ''
})

const currentRoleDescription = computed(() => {
  return currentRoleInfo.value.description || ''
})

const currentRoleInfo = computed(() => {
  return roleInfo.value[currentRole.value] || {}
})

const rolePermissions = computed(() => {
  const permissions = permissionGroups.value.flatMap(group => group.permissions)
  return {
    total: permissions.length,
    active: permissions.filter(p => p.granted).length,
    restricted: permissions.filter(p => !p.granted).length
  }
})

const workBreadcrumbs = computed(() => {
  return [
    { name: '首页', path: '/', icon: 'HomeFilled' },
    { name: '角色工作台', path: '/role-dashboard', icon: 'Grid' },
    { name: currentRoleName.value, path: `/${currentRole.value}`, icon: 'User' }
  ]
})

// 方法
const switchRole = (roleId) => {
  currentRole.value = roleId
  updateFunctionCategories(roleId)
  ElMessage.success(`已切换到${currentRoleName.value}角色`)
}

const updateFunctionCategories = (roleId) => {
  // 根据角色ID更新功能分类和权限
  const roleData = {
    'admin': [
      {
        id: 'system',
        name: '系统管理',
        icon: 'Setting',
        expanded: true,
        functions: [
          { id: 'user-mgmt', name: '用户管理', icon: 'User', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'role-mgmt', name: '角色管理', icon: 'Key', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'system-config', name: '系统配置', icon: 'Setting', badge: '', badgeType: '', restricted: false, disabled: false }
        ]
      }
    ],
    'sales-manager': [
      {
        id: 'sales',
        name: '销售管理',
        icon: 'ShoppingCart',
        expanded: true,
        functions: [
          { id: 'order-list', name: '订单列表', icon: 'List', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'order-approval', name: '订单审批', icon: 'Check', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'team-mgmt', name: '团队管理', icon: 'User', badge: '', badgeType: '', restricted: false, disabled: false }
        ]
      }
    ],
    'sales-person': [
      {
        id: 'sales',
        name: '销售管理',
        icon: 'ShoppingCart',
        expanded: true,
        functions: [
          { id: 'order-list', name: '订单列表', icon: 'List', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'order-create', name: '新建订单', icon: 'Plus', badge: '', badgeType: '', restricted: false, disabled: false },
          { id: 'customer-mgmt', name: '客户管理', icon: 'User', badge: '', badgeType: '', restricted: false, disabled: false }
        ]
      }
    ]
  }
  
  functionCategories.value = roleData[roleId] || []
}

const toggleCategory = (categoryId) => {
  const category = functionCategories.value.find(c => c.id === categoryId)
  if (category) {
    category.expanded = !category.expanded
  }
}

const selectFunction = (func) => {
  if (func.disabled) {
    ElMessage.warning('该功能暂时不可用')
    return
  }
  
  if (func.restricted) {
    permissionMessage.value = `您没有${func.name}的访问权限，请联系管理员申请权限`
    showPermissionDialog.value = true
    return
  }
  
  activeFunction.value = func.id
  ElMessage.success(`已选择功能：${func.name}`)
}

const executeAction = (action) => {
  if (action.disabled) {
    ElMessage.warning('该操作暂时不可用')
    return
  }
  
  ElMessage.success(`执行操作：${action.title}`)
}

const toggleFunctionPanel = () => {
  isFunctionPanelCollapsed.value = !isFunctionPanelCollapsed.value
}

const toggleInfoPanel = () => {
  isInfoPanelCollapsed.value = !isInfoPanelCollapsed.value
}

const refreshWorkArea = () => {
  ElMessage.success('工作区已刷新')
}

const exportData = () => {
  ElMessage.info('导出数据功能')
}

const requestPermission = () => {
  ElMessage.info('权限申请已提交，请等待管理员审批')
  showPermissionDialog.value = false
}

const contactAdmin = () => {
  ElMessage.info('已联系管理员')
  showPermissionDialog.value = false
}

const toggleNotifications = () => {
  ElMessage.info('通知功能')
}

// 生命周期
onMounted(() => {
  updateFunctionCategories(currentRole.value)
})
</script>

<style scoped>
.role-based-nav-system {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部角色导航 */
.role-header {
  height: 70px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.role-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.role-selector {
  flex: 1;
  max-width: 300px;
}

.role-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.user-role {
  font-size: 12px;
  color: #909399;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧功能面板 */
.function-panel {
  width: 300px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.function-panel.collapsed {
  width: 0;
  border-right: none;
}

.panel-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.permission-overview {
  margin-bottom: 24px;
}

.permission-overview h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.permission-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: #909399;
}

.function-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.function-category {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fafafa;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 600;
}

.category-header:hover {
  background: #f5f7fa;
}

.expand-icon {
  margin-left: auto;
  transition: transform 0.2s;
}

.category-functions {
  padding: 8px;
}

.function-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
  position: relative;
}

.function-item:hover {
  background: #f5f7fa;
}

.function-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.function-item.restricted {
  opacity: 0.6;
}

.function-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.function-badges {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.restricted-icon {
  color: #f56c6c;
  font-size: 12px;
}

/* 中间工作区域 */
.work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.work-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
}

.work-breadcrumb {
  display: flex;
  align-items: center;
}

.work-actions {
  display: flex;
  gap: 8px;
}

.work-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 角色工作台 */
.role-dashboard {
  background: white;
  border-radius: 8px;
  padding: 24px;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.dashboard-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.dashboard-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.quick-actions {
  margin-bottom: 32px;
}

.quick-actions h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.action-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.action-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-icon {
  width: 40px;
  height: 40px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 18px;
}

.action-content {
  flex: 1;
}

.action-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.action-content p {
  margin: 0;
  font-size: 12px;
  color: #606266;
}

.action-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.data-overview {
  margin-bottom: 32px;
}

.data-overview h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.overview-card {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.overview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #303133;
}

.overview-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overview-value {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.overview-trend.positive {
  color: #67c23a;
}

.overview-trend.negative {
  color: #f56c6c;
}

.recent-activities {
  margin-bottom: 0;
}

.recent-activities h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.activity-icon {
  width: 32px;
  height: 32px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.activity-desc {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 11px;
  color: #909399;
}

.activity-status {
  margin-left: auto;
}

/* 右侧信息面板 */
.info-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.info-panel.collapsed {
  width: 0;
  border-left: none;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.role-details,
.permissions-list,
.role-history {
  margin-bottom: 24px;
}

.role-details h4,
.permissions-list h4,
.role-history h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.detail-item label {
  font-weight: 600;
  color: #303133;
}

.permission-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.permission-group {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fafafa;
  font-weight: 600;
}

.group-permissions {
  padding: 8px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: background-color 0.2s;
}

.permission-item.granted {
  background: #f0f9ff;
  color: #67c23a;
}

.permission-item:not(.granted) {
  background: #fef0f0;
  color: #f56c6c;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.history-item:hover {
  background: #f5f7fa;
}

.history-icon {
  width: 24px;
  height: 24px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 12px;
}

.history-content {
  flex: 1;
}

.history-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.history-time {
  font-size: 11px;
  color: #909399;
}

/* 权限提示弹窗 */
.permission-dialog {
  text-align: center;
  padding: 20px;
}

.permission-icon {
  font-size: 48px;
  color: #f56c6c;
  margin-bottom: 16px;
}

.permission-dialog h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.permission-dialog p {
  margin: 0 0 24px 0;
  color: #606266;
  line-height: 1.5;
}

.permission-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 动画 */
.category-slide-enter-active,
.category-slide-leave-active {
  transition: all 0.3s ease;
}

.category-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.category-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式 */
@media (max-width: 1200px) {
  .info-panel {
    width: 280px;
  }
  
  .function-panel {
    width: 260px;
  }
}

@media (max-width: 768px) {
  .role-selector {
    display: none;
  }
  
  .function-panel,
  .info-panel {
    position: fixed;
    top: 70px;
    height: calc(100vh - 70px);
    z-index: 999;
  }
  
  .function-panel {
    left: 0;
  }
  
  .info-panel {
    right: 0;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
}
</style>
